<template>
  <!-- 归档信息管理页面 -->
  <div class="IntegrationEdit">
    <!-- 头部 -->
    <div class="info-top">
      <div class="info-top-left">
        <div class="line"></div>
        <span class="fileinfo">{{ title }}</span>
        <div class="info-top-right">
          <el-button
            type="primary"
            class="btn-hongse"
            :disabled="disabled"
            @click="saveDate(0)"
            ><i class="el-icon-edit el-icon--left"> 暂存</i></el-button
          >
          <el-button
            type="primary"
            class="btn-lanse"
            :disabled="disabled"
            @click="saveDate(1)"
            ><i class="el-icon-check el-icon--left"> 提交</i></el-button
          >
          <el-button class="close" @click="closeFN">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="divider">
      <el-divider></el-divider>
    </div>
    <!-- 中间 -->
    <div class="info-center">
      <span class="info-center-text">基本信息</span>
      <div class="info-center-form">
        <el-form
          style="width: 60%"
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="名称:" class="info-center-form-text">
            <el-input
              v-model="formLabelAlign.name"
              class="info-center-form-input"
              placeholder="名称不可重复,具有唯一性"
            ></el-input>
          </el-form-item>

          <el-form-item label="类型:" class="info-center-form-text">
            <el-select
              filterable
              allow-create
              default-first-option
              class="info-center-form-input"
              v-model="formLabelAlign.valueType"
              placeholder="请输入类型"
              @blur="selectBlursensorCode($event)"
            >
              <el-option
                v-for="it in optionList"
                :key="it.id"
                :label="it.type_name"
                :value="it.type_name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="创建人:" class="info-center-form-text">
            <el-input
              v-model="formLabelAlign.creator"
              class="info-center-form-input"
              placeholder="请填写操作人姓名"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      labelPosition: "left",
      // title: "新建信息",
      formLabelAlign: {
        name: "",
        nature: "",
        valueType: "",
        ranges: "",
        proofRule: "",
        projectName: "",
        creator: "",
      },
      tabID: null,
      parentId: null,
      disabled: false,
      row: null,
      title: "",
      // 自由文本，图片，图像，视频，音频，其他
      optionList: [
        {
          id: "1",
          type_name: "自由文本",
        },
        {
          id: "2",
          type_name: "图片",
        },
        {
          id: "3",
          type_name: "图像",
        },
        {
          id: "4",
          type_name: "视频",
        },
        {
          id: "5",
          type_name: "音频",
        },
        {
          id: "6",
          type_name: "其他",
        },
      ],
    };
  },
  activated() {
    this.clear();
    this.title = this.$route.query.title;
    this.tabID = this.$route.query.id;
    this.parentId = this.$route.query.parentId;
    // this.creator = this.$route.query.creator;
    // this.formLabelAlign.creator = this.creator;
    this.row = this.$route.query.row;
    if (this.tabID == 2) {
      this.editFn();
    }
  },
  mounted() {
    // this.getZbkType();
    this.tabID = this.$route.query.id;
    this.parentId = this.$route.query.parentId;
    // this.creator = this.$route.query.creator;
    // this.formLabelAlign.creator = this.creator;
    this.title = this.$route.query.title;
    this.row = this.$route.query.row;
    if (this.tabID == 2) {
      this.editFn();
    }
  },
  methods: {
    // 获取整编库类型表格数据
    getZbkType() {
      this.$api
        .getZbkType()
        .then((res) => {
          if (res.code == 200) {
            this.optionList = res.data;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: "查询失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    closeFN() {
      this.$router.go(-1);
    },
    clear() {
      this.formLabelAlign = {
        name: "",
        valueType: "",
        creator: "",
      };
    },
    editFn() {
      this.parentId = "";
      // console.log(this.row);
      this.formLabelAlign.id = this.row.id;
      this.formLabelAlign.name = this.row.name;
      this.formLabelAlign.nature = this.row.nature;
      this.formLabelAlign.valueType = this.row.valueType;
      this.formLabelAlign.ranges = this.row.ranges;
      this.formLabelAlign.proofRule = this.row.proofRule;
    },
    // 0暂存  1提交
    saveDate(ids) {
      // console.log(this.formLabelAlign);
      if (
        this.formLabelAlign.name == "" ||
        this.formLabelAlign.valueType == ""
      ) {
        this.$message({
          showClose: true,
          message: "基本信息不能为空",
          type: "warning",
        });
        return;
      }
      if (this.tabID == 1) {
        //新建
        this.disabled = true;
        this.formLabelAlign.state = ids;
        this.formLabelAlign.parentId = this.parentId;
        console.log(this.formLabelAlign);
        this.$api
          .addLable(this.formLabelAlign)
          .then((res) => {
            debugger;
            if (res.code == "200") {
              this.disabled = false;
              this.$router.push({
                path: "/Integration",
              });
              this.$message({
                showClose: true,
                message: res.msg,
                type: "success",
              });
            } else {
              this.disabled = false;
              this.$message({
                showClose: true,
                message: res.msg,
                type: "error",
              });
            }
          })
          .catch((res) => {
            this.disabled = false;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          });
      } else {
        //编辑
        this.disabled = true;
        this.formLabelAlign.parentId = this.parentId;
        this.formLabelAlign.state = ids;
        this.$api
          .addLable(this.formLabelAlign)
          .then((res) => {
            if (res.code == "200") {
              this.disabled = false;
              this.$router.push({
                path: "/Integration",
              });
              this.$message({
                showClose: true,
                message: res.msg,
                type: "success",
              });
            } else {
              this.disabled = false;
              this.$message({
                showClose: true,
                message: res.msg,
                type: "error",
              });
            }
          })
          .catch((res) => {
            this.disabled = false;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          });
      }
    },
    selectBlursensorCode(e) {
      // console.log(e,'eee')
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button--primary {
  width: 110px;
  height: 44px;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  width: 110px;
  height: 44px;
}
.IntegrationEdit {
  overflow: hidden;
  .el-form-item {
    margin-bottom: 10px;
  }

  //头部
  .info-top {
    margin-top: 20px;
    margin-left: 30px;
    .info-top-left {
      .line {
        width: 4px;
        height: 20px;
        background: #3386fe;
        opacity: 1;
        border-radius: 0px;
        float: left;
        margin-top: 2px;
      }
      .fileinfo {
        margin-left: 10px;
        width: 88px;
        height: 30px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-top-right {
      float: right;
      margin-top: -10px;
      margin-right: 30px;
    }
  }
  //中间
  .info-center {
    margin-left: 45px;
    .info-center-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
    }
    .info-center-form {
      margin-top: 10px;
      .info-center-form-text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
      .info-center-form-input {
        width: 446px;
        height: 44px;
      }
    }
  }
  //底部
  .info-bottom {
    margin-left: 45px;
    .info-bottom-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
    }
    .info-bottom-box {
      margin-top: 10px;
      width: 815px;
      height: 350px;
      background: rgba(240, 240, 246, 0.5);
      border: 1px solid #d8d8d8;
      opacity: 1;
      border-radius: 5px;
    }
  }
}
</style>